var pageVisible = null;
var pageAnterior = null;

$(document).ready(function(){
	pageVisible = $('nav');
	//alert(pageVisible);
});

jQuery.fn.center = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this;
};

$(document).ready(function() {
	$('a').click(function(e){
		//alert("XXX: " + e + " " + $(e).attr('href'));
		//alert($(this).attr('href'));
		//alert($('a').index(this).attr('href'));
		//alert($('a').attr('href'));
		//var page = $('a').attr('href');
		pageAnterior = pageVisible;
		var page = $(this).attr('href');
		if(page == '#nav'){
			page = 'nav';
		}
		if($(page).hasClass('popup')){
			open(page, 'popup');
		}else{
			open(page);
		}
		
	});
	$("#thumbnail img").click(function(e){
		$("#background").css({"opacity" : "0.7"})
						.fadeIn("slow");

		$("#large").html("<img src='"+$(this).parent().attr("href")+"' alt='"+$(this).attr("alt")+"' /><br/>"+$(this).attr("rel")+"")
				   .center()
				   .fadeIn("slow");

		return false;
	});

	$(document).keypress(function(e){
		if(e.keyCode==27){
			$("#background").fadeOut("slow");
			$("#large").fadeOut("slow");
		}
	});

	$("#background").click(function(){
		$("#background").fadeOut("slow");
		$("#large").fadeOut("slow");
	});

	$("#large").click(function(){
		$("#background").fadeOut("slow");
		$("#large").fadeOut("slow");
	});

});

/**
 * modes: popup, page.
 */
function open(page, mode){
	
	switch(mode){
		case 'popup':
			alert('popup');
			break;
		default: //page
			//alert('no popup; pageVisible = ' + $(pageVisible).html());
			$(pageVisible).removeClass('visible');
			$(pageVisible).addClass('invisible');
			//$(pageVisible).hide();
			$(page).removeClass('invisible');
			$(page).addClass('visible');
			pageVisible = page;
	}
}

function openPage(elem, pageId){
	titleToSet = $(elem).text();
	setTitle(titleToSet);
	toggleClass(pageId, 'page', 'page-selected');
	toggleClass(elem.id, 'footer-section-clickable', 'footer-section-clickable-selected');
}

function toggleClass(id, classBase, classActive){
	$("."+classBase).removeClass(classActive);
	$("#"+id).addClass(classActive);
}

function setTitle(title){
	$("h1").html(title);
}